<template>
  <div class="container">
    <div class="com-chart" ref="screen_ref"></div>
    <i class="left fa fa-chevron-left" @click="toLeft"></i>
    <i class="right fa fa-chevron-right" @click="toRight"></i>
    <p class="currentName">{{ currentName }}</p>
  </div>
</template>

<script>
export default {
  name: "Screen",
  data() {
    return {
      chartInstance: null,
      allData: null,
      currentIndex: 0,
    }
  },
  computed: {
    currentName() {
      if (this.allData) {
        return this.allData[this.currentIndex].name;
      }
    }
  },
  created() {
    this.$socket.registerCallBack('screenData', this.getDate)
  },
  mounted() {
    this.initChart()
    this.$socket.send({
      action: 'getData',
      socketType: 'screenData',
      chartName: 'hotproduct',
      value: ''
    })
    window.addEventListener('resize', this.screenAdapter)
  },
  destroyed() {
    this.$socket.unRegisterCallBack('screenData', this.getDate)
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.screen_ref, 'chalk')
      const initOptions = {
        title: {
          text: "热销商品占比",
          left: 20,
          top: 20
        },
        legend: {
          top: '4%',
          icon: 'circle'
        },
        tooltip: {
          show: true,
          formatter: (arg) => {
            let allValue = 0
            let str = ''
            arg.data.children.forEach(item => {
              allValue += item.value
            })
            arg.data.children.forEach(item => {
              str += `${item.name}: ${parseInt(item.value / allValue * 100) + '%'}<br />`
            })
            return str
          }
        },
        series: [
          {
            type: 'pie',
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              },
              labelLine: {
                show: false
              }
            }
          }
        ]
      }
      this.chartInstance.setOption(initOptions)
    },
    getDate(resData) {
      this.allData = resData
      console.log(this.allData)
      this.updateChart()
    },
    updateChart() {
      const seriesData = this.allData[this.currentIndex].children.map(item => {
        return {
          name: item.name,
          value: item.value,
          children: item.children
        }
      })
      const legendData = this.allData[this.currentIndex].children.map(item => {
        return item.name
      })
      const updateOptions = {
        legend: {
          data: legendData
        },
        series: [
          {
            data: seriesData
          }
        ]
      }
      this.chartInstance.setOption(updateOptions)
    },
    screenAdapter() {
      this.chartInstance.resize()
    },
    toLeft() {
      if (this.currentIndex !== 0) {
        this.currentIndex--
        this.updateChart()
      }
    },
    toRight() {
      if (this.currentIndex !== this.allData.length - 1) {
        this.currentIndex++
        this.updateChart()
      }
    }
  },
}
</script>

<style lang="less" scoped>
i {
  z-index: 10;
  position: absolute;
  top: 50%;
  color: #ffffff;
  transform: scale(2);
  cursor: pointer;
  user-select: none;
}

.right {
  right: 10%;
}

.left {
  left: 10%;
}

.currentName {
  position: absolute;
  right: 10%;
  bottom: 10%;
  color: #ffffff;
}
</style>